<template>
	<view class="body">
		<view class="carts">
			<block v-if="goodsList.length > 0">
				<view class="carts-items">
					<block v-for="(item,index) in goodsList" :key="index">
						<view class="c-item">
							<view class="left">
								<view class="check">
									<checkbox-group @click="checkboxChange(item)">
										<label>
											<checkbox value="true" :checked="item.checked" />
										</label>
									</checkbox-group>
								</view>
								<view class="img" @click="toDetail(item.goods_id)">
									<image :src="item.goods_sku.spec_image==''? item.image:item.goods_sku.img_show"
										mode=""></image>
								</view>
							</view>

							<view class="right">
								<view class="right-title">
									<view class="c-title text-cut">
										{{item.goods_name}}
									</view>
									<view class="manage" @click="toManage('confirm',item)" v-if="item.numStatus">管理
									</view>
									<view class="manage" @click="toManage('cancel',item)" v-else>取消</view>
								</view>
								<view class="c-spec">{{ item.goods_sku.goods_attr ? item.goods_sku.goods_attr : '' }}
								</view>
								<view class="bottom">
									<view class="c-price"><text>￥</text>{{item.goods_price}}</view>
									<view class="num" v-if="item.numStatus">
										<uni-number-box :value="item.total_num" @change="changeValue($event,index)"
											:min="1" :max="item.goods_sku.stock_num" />
									</view>
									<view class="delete" @click="deleteItem(index,item)" v-else></view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</block>


			<block v-else>
				<view class="cart" v-if="show">
					<view class="img">

					</view>
					<view class="text">
						购物车还是空的哟
					</view>
					<view class="btn">
						<button @click="toMall()">去逛逛</button>
					</view>
				</view>
			</block>
		</view>

		<view class="topay">
			<view class="">
				<checkbox-group @click="checkallCheck()">
					<label>
						<checkbox value="true" :checked="allCheck" />全选
					</label>
				</checkbox-group>
			</view>
			<view class="price">
				<view class="number">
					<view class="text">
						已选择{{allNum}}件，合计
					</view>
					<view class="n-pri">￥<text>{{allPrice.toFixed(2)}}</text></view>
				</view>
				<view class="btn" @click="toAccount()">
					<button>结算</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [], //商品列表
				show: false, //购物车为空展示的状态
				allPrice: 0, // 总价
				allCheck: false, //全选的勾选状态
				itemCheck: false, //点击管理的初始勾选状态，
				allNum: 0, //总个数
			}
		},
		onShow() {
			this.allCheck = false
			this.allPrice = 0
			this.allNum = 0
			this.itemCheck = false
			this.getGoods()
		},
		methods: {
			getGoods() {
				let _this = this
				_this.$api.get('mall.cart/getlists', {}).then(res => {
					if (res.code == 1) {
						_this.show = true
						let list = res.data.goods_list
						_this.goodsList = list.map(item => {
							item.checked = false
							item.numStatus = true
							return item
						})
					}
				})
			},
			toDetail(goods_id) {
				uni.navigateTo({
					url: '/pages/mall/detail?goods_id=' + goods_id
				})
			},
			toMall() {
				uni.switchTab({
					url: '/pages/mall/index'
				})
			},
			toManage(type, item) {
				switch (type) {
					// 管理
					case 'confirm':
						item.numStatus = false
						// 将第一次的初始状态保存
						this.itemCheck = item.checked
						if (item.checked) { //如果有勾选，那么点击的时候就取反
							this.checkboxChange(item)
						} else {
							// 如果没有勾选，那么点击的时候不变
							item.checked = item.checked
						}
						break;
						// 取消
					case 'cancel':
						item.numStatus = true
						// 如果初始状态为勾选
						if (this.itemCheck) {
							// 那么先赋值为不勾选，在函数里面进行取反就变成勾选了
							item.checked = !this.itemCheck
							this.checkboxChange(item)
						}
						break;
				}
				this.computePrice()
			},
			toAccount() {
				let list = []
				let idList = []
				this.goodsList.forEach(item => {
					if (item.checked == true) {
						list.push(item)
						idList.push(item.goods_id + '_' + item.goods_sku_id)
					}
				})
				if (list.length == 0) {
					this.toast('请选择商品')
				} else {				
					uni.navigateTo({
						url: '/pages/mall/submit?type=cart&ids=' + idList.toString()
					})
				}
			},
			deleteItem(index, item) {
				let _this = this
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				_this.$api.post('mall.cart/delete', {
					goods_id: item.goods_id,
					goods_sku_id: item.goods_sku_id
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.goodsList.splice(index, 1)
						this.checkboxChange(item)
					} else {
						_this.toast(res.msg)
					}
				})
			},
			checkboxChange(item) {
				let _this = this
				let list = []
				item.checked = !item.checked
				_this.goodsList.forEach(item => {
					if (item.checked == true) {
						list.push(item)
					}
				})
				if (list.length == _this.goodsList.length) {
					_this.allCheck = true
				} else {
					_this.allCheck = false
				}
				this.computePrice()
			},
			checkallCheck() {
				// 点击按钮取反
				this.allCheck = !this.allCheck
				if (this.allCheck == true) { //如果勾选全选了，则遍历所有的item进行勾选
					this.goodsList.forEach(item => {
						item.checked = true
					})
				} else { //如果没有勾选全选，则遍历所有的item进行不勾选
					this.goodsList.forEach(item => {
						item.checked = false
					})
				}
				this.computePrice()
			},
			computePrice() {
				let _this = this

				var sumPrice = 0,
					sumNum = 0
				_this.goodsList.forEach(item => {
					if (item.checked) {
						sumPrice += item.total_num * item.goods_price
						sumNum += 1
					}
				})
				_this.allPrice = sumPrice
				_this.allNum = sumNum
			},
			changeValue(value, index) {
				let _this = this

				let goods = _this.goodsList[index]

				let diff = value - goods.total_num

				if (diff > 0) {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})

					let goods_num = value - goods.total_num

					_this.$api.post('mall.cart/add', {
						goods_id: goods.goods_id,
						goods_num: goods_num,
						goods_sku_id: goods.goods_sku_id,
					}).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							this.goodsList[index].total_num += goods_num
							this.computePrice()
						} else {
							_this.toast(res.msg)
						}
					})
				} else if (diff < 0) {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})

					let goods_num = goods.total_num - value

					_this.$api.post('mall.cart/sub', {
						goods_id: goods.goods_id,
						goods_num: goods_num,
						goods_sku_id: goods.goods_sku_id,
					}).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							this.goodsList[index].total_num -= goods_num
							this.computePrice()
						} else {
							_this.toast(res.msg)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 200rpx;
	}

	.text-cut {
		overflow: hidden;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.carts {
		width: calc(100vw - 48rpx);
		padding: 40rpx 24rpx;
	}

	/* 购物车不为空时 */
	.c-item {
		width: calc(100vw - 112rpx);
		padding: 34rpx 32rpx 25rpx 32rpx;
		background-color: #FFFFFF;
		margin-bottom: 32rpx;
		display: flex;
		align-items: center;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;
	}

	.c-item .img {
		width: 180rpx;
		height: 180rpx;
		margin: 0 32rpx;
	}

	.c-item image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 16rpx;

	}

	.c-item:last-of-type {
		margin: 0;
	}

	.left {
		width: 45%;
		height: 100%;
		display: flex;
		align-items: center;
	}


	.right {
		width: 55%;
		height: 100%;
	}

	.right-title,
	.bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.c-title {
		width: 70%;
		font-size: 32rpx;
		font-weight: bold;
	}

	.manage {
		width: 14%;
		font-size: 24rpx;
		color: #666666;
	}


	.uni-tag-text--small {
		font-size: 20rpx !important;
	}

	.uni-tag--small {
		padding: 0 10rpx !important;
	}

	.c-spec {
		font-size: 24rpx;
		color: #666666;
		margin-top: 8rpx;
	}

	.c-spec text {
		font-size: 20rpx;
		color: #999999;
	}

	.bottom {
		align-items: flex-end;
	}

	.c-price {
		font-size: 32rpx;
		color: #FF0000;
		font-weight: bold;
		margin-top: 27rpx;
	}

	.c-price text {
		font-size: 20rpx;
	}

	.delete {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #FF0000;
		position: relative;
	}

	.delete::after {
		content: "";
		width: 20rpx;
		height: 6rpx;
		background: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 数字输入框 */
	.uni-numbox__value {
		width: 55rpx !important;
		height: 40rpx !important;
		font-size: 22rpx !important;
		min-height: 40rpx !important;
		background: #ffffff !important;
		border: 1rpx solid #E5E5E5 !important;
		border-radius: 7rpx !important;
		margin: 0 8rpx !important;
	}

	.uni-numbox__plus,
	.uni-numbox__minus {
		width: 40rpx !important;
		height: 40rpx !important;
		border-radius: 7rpx;
		padding: 0 !important;
		background: #FFFFFF !important;
		border: 1rpx solid #E5E5E5 !important;
	}

	.uni-numbox--text {
		line-height: 40rpx !important;
		font-size: 35rpx !important;
		vertical-align: middle !important;
		font-weight: bold !important;
		color: #999999 !important;
	}

	/* 购物车为空时 */
	.cart {
		width: 100%;
		height: 808rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #666666;
	}

	.cart image {
		width: 299rpx;
		height: 285rpx;
		margin-bottom: 32rpx;
	}
	
	.cart .text{
		font-size: 28rpx;
	}

	.cart button,
	.topay button {
		width: 260rpx;
		// height: 56rpx;
		line-height: 56rpx;
		background-color: #000000;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 100rpx;
		font-weight: 800;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 0;
		margin-top: 24rpx;
	}

	.topay button {
		width: 140rpx;
		margin: 0;
	}

	.cart button::after,
	.topay button::after {
		border: none;
	}

	.topay,
	.topay .price {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.topay {
		width: calc(100vw - 48rpx);
		height: 100rpx;
		padding: 24rpx 24rpx 20rpx 24rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	
	.topay .price .number{
		margin-right: 20rpx;
		text-align: right;
	}

	.topay label {
		align-items: flex-end;
		display: flex;
		font-size: 28rpx;
		font-weight: bold;
	}

	.topay .text {
		font-size: 18rpx;
		color: #666666;
	}

	.topay .n-pri {
		font-size: 20rpx;
		color: #FF0000;
	}

	.topay .n-pri text {
		font-size: 32rpx;
		font-weight: bold;
	}

	/* checkbox 样式 */
	checkbox .wx-checkbox-input {
		border-radius: 50%;
		width: 32rpx;
		height: 32rpx;
		border: 1px solid #ccc;
		background: #FFFFFF;
	}

	/* 复选框选中后样式 */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #35D14A;
		border: 1px solid #35D14A;
	}

	/*checkbox选中后图标样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		font-size: 20rpx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}
</style>